<template>
  <!-- 模板内容不变，仅修改样式 -->
  <view class="login-container">
    <!-- 头部区域 -->
    <view class="header">
      <u-icon name="search-user" color="#2979FF" size="60"></u-icon>
      <text class="title">智能招聘</text>
      <text class="subtitle">专业人才匹配平台</text>
    </view>

   <!-- 表单区域 -->
       <u-form :model="form" class="form-wrapper">
         <!-- 账号行 -->
         <u-form-item 
           label="账号" 
           label-position="left" 
           label-width="140rpx" 
           label-align="right"
         >
           <u-input 
             v-model="form.account" 
             type="text" 
             placeholder="请输入账号" 
             :border="true"
             class="small-input"  
           />
         </u-form-item>
   
         <!-- 密码行 -->
         <u-form-item 
           label="密码" 
           label-position="left" 
           label-width="140rpx" 
           label-align="right"
         >
           <u-input 
             v-model="form.password" 
             type="password" 
             placeholder="请输入密码" 
             :border="true"
             class="small-input"
           />
         </u-form-item>
   
         <!-- 确认密码行 -->
         <u-form-item 
           label="确认密码" 
           label-position="left" 
           label-width="140rpx" 
           label-align="right"
         >
           <u-input 
             v-model="form.confirmPassword" 
             type="password" 
             placeholder="请确认密码" 
             :border="true"
             class="small-input"
           />
         </u-form-item>
   
         <!-- 邮箱行（带验证码按钮） -->
         <u-form-item 
           label="邮箱"
           label-position="left"    
           label-width="140rpx"     
           label-align="right"      
         >
           <view class="email-input-container">
             <u-input 
               v-model="form.temporaryEmail" 
               type="email" 
               placeholder="请输入邮箱" 
               :border="true"
               class="small-input email-input"  
             />
             <u-button 
               type="primary" 
               size="mini" 
               class="send-code-btn"
               @click="sendVerification"
               :disabled="countdown > 0"
             >
               {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
             </u-button>
           </view>
         </u-form-item>
   
         <!-- 验证码行 -->
         <u-form-item
           label="验证码"
           label-position="left"    
           label-width="140rpx"     
           label-align="right"      
         >
           <u-input 
             v-model="form.verification" 
             type="text" 
             placeholder="请输入验证码" 
             :border="true"
             class="small-input"
           />
         </u-form-item>

      <!-- 注册按钮 -->
      <u-form-item>
        <u-button 
          type="primary" 
          block 
          class="login-btn"
          @click="enroll"
        >注册</u-button>
      </u-form-item>

      <!-- 登录引导 -->
      <view class="register-row">
        <text>已有账号？</text>
        <navigator url="/pages/zcy/login" class="link">去登录</navigator>
      </view>
    </u-form>
	<u-toast ref="uToast" />
  </view>
</template>

<script>
	import state from '../../store/state';
import {sendEmailForVer,submitUserInfo} from '@/api/user.js'
	// 脚本内容不变
	export default {
	  data() {
	    return {
	      form: {
			account:'',
	        email: '',
	        password: '',
			verification:'',
			confirmPassword:'',
			temporaryEmail:''
	      },
		  list: [{
		  			name: '邮箱'
		  		}, {
		  			name: '电话'
		  		}, {
		  			name: '账号',
		  		}],
		  current: 0,
		  countdown: 0, // 新增倒计时计数器
		  timer: null // 新增定时器引用
	    }
	  },
	  methods: {
		//注册方法
	    enroll() {
			if(this.form.account === ''){
				this.$refs.uToast.show({
					title: '账号不可为空',
					type: 'warning',
					position:'top'
				})
				return;
			}
			if(this.form.password === ''){
				this.$refs.uToast.show({
					title: '密码不可为空',
					type: 'warning',
					position:'top'
				})
				return;
			}
			if(this.form.password != this.form.confirmPassword){
				this.$refs.uToast.show({
					title: '确认密码',
					type: 'warning',
					position:'top'
				})
				return;
			}
			if(this.form.temporaryEmail === ''){
				this.$refs.uToast.show({
					title: '邮箱不可为空',
					type: 'warning',
					position:'top'
				})
				return;
			}
			if(this.form.email === ''){
				this.$refs.uToast.show({
					title: '请获取验证码',
					type: 'warning',
					position:'top'
				})
				return;
			}
			if(this.form.verification === ''){
				this.$refs.uToast.show({
					title: '请输入验证码',
					type: 'warning',
					position:'top'
				})
				return;
			}
			submitUserInfo({
				account:this.form.account,
				password:this.form.password,
				email:this.form.email,
				emailCode:this.form.verification,
			}).then(res=>{
				console.log(res)
				if(res.code == 200){
					uni.setStorageSync("token",res.data.userId);
					state.userInfo.userId = res.data.userId;
					this.$refs.uToast.show({
						title: '注册成功',
						type: 'success',
						position:'top'
					})
					uni.navigateTo({
						url:'/pages/zcy/jobInformation'
					})
				}else{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error',
						position:'top'
					})
				}
			})
	    },
		//发送验证码方法
		sendVerification(){
			// 如果在冷却期内，直接返回
			if (this.countdown > 0) {
			  this.$refs.uToast.show({
			    title: `请等待${this.countdown}秒后重试`,
			    type: 'warning',
			    position: 'top'
			  })
			  return;
			}
			if(this.isEmailValid(this.form.temporaryEmail)){
				this.form.email = this.form.temporaryEmail
				console.log(this.form.email)
				sendEmailForVer({email:this.form.email}).then(res=>{
					this.$refs.uToast.show({
						title: '验证码已发送',
						type: 'success',
						position:'top'
					})
					// 开始倒计时
					this.countdown = 60;
					this.timer = setInterval(() => {
					    this.countdown--;
					    if (this.countdown <= 0) {
					      clearInterval(this.timer);
					    }
					}, 1000);
				}).catch(e=>{
					this.$refs.uToast.show({
						title: '验证码发送失败',
						type: 'warning',
						position:'top'
					})
				})
			}else{
				this.$refs.uToast.show({
					title: '邮箱格式错误',
					type: 'warning',
					position:'top'
				})
			}
		},
		//验证邮箱格式辅助方法
		isEmailValid(email) {
		    const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
		    return emailReg.test(email);
		  },
	  }
	}
</script>

<style scoped>
/* 基础响应式变量定义 */
:root {
  --base-font: 26rpx;          /* 基础字体大小 */
  --small-font: 24rpx;         /* 小字体大小 */
  --title-font: 36rpx;         /* 标题字体大小 */
  --subtitle-font: 24rpx;      /* 副标题字体大小 */
  --spacing: 20rpx;            /* 基础间距单位 */
  --form-padding: 40rpx;       /* 表单内边距 */
  --input-height: 60rpx;       /* 输入框高度 */
  --btn-height: 80rpx;         /* 主按钮高度 */
  --code-btn-width: 130rpx;    /* 验证码按钮宽度 */
  --form-max-width: 600rpx;    /* 表单最大宽度 */
}

/* 页面容器 - 自适应布局 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #F5F7FA;
  padding: var(--spacing);     /* 使用基础间距单位 */
  box-sizing: border-box;      /* 确保padding不影响整体尺寸 */
}

/* 头部样式 - 响应式调整 */
.header {
  text-align: center;
  margin-bottom: calc(var(--spacing) * 3);  /* 动态计算间距 */
  width: 100%;
  max-width: var(--form-max-width);
  margin-bottom: 20px;
}

.header .title {
  font-size: var(--title-font);
  font-weight: bold;
  color: #333;
  margin-top: var(--spacing);
  display: block;
}

.header .subtitle {
  font-size: var(--subtitle-font);
  color: #999;
  margin-top: calc(var(--spacing) * 0.5);
  display: block;
}

/* 表单容器 - 自适应宽度 */
.form-wrapper {
  width: 80%;
  max-width: var(--form-max-width);
  background: #FFFFFF;
  padding: var(--form-padding);
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* 表单项间距 - 响应式调整 */
.u-form-item {
  margin-bottom: calc(var(--spacing) * 0.5);  /* 相对间距 */
  padding: calc(var(--spacing) * 0.25) 0;
}

/* 输入框基础样式 */
.u-input {
  border-radius: 8rpx;
  box-sizing: border-box;
}

/* 小输入框样式 - 响应式高度 */
.small-input {
  height: var(--input-height);
  line-height: var(--input-height);
  font-size: var(--base-font);
  margin: 10px
}

/* 邮箱输入框容器：灵活适配按钮位置 */
.email-input-container {
  position: relative;
  width: 100%;
}

/* 邮箱输入框：动态预留按钮空间 */
.email-input {
  padding-right: calc(var(--code-btn-width) + 15rpx) !important;  /* 基于按钮宽度计算 */
}

/* 发送验证码按钮 - 响应式大小 */
.send-code-btn {
  position: absolute;
  right: 5rpx;
  top: 50%;
  transform: translateY(-50%);
  width: var(--code-btn-width);
  height: calc(var(--input-height) - 10rpx);  /* 比输入框略矮 */
  line-height: calc(var(--input-height) - 10rpx);
  font-size: var(--small-font);
  border-radius: 6rpx;
}

/* 注册按钮 - 响应式高度 */
.login-btn {
  border-radius: 8rpx;
  height: var(--btn-height);
  line-height: var(--btn-height);
  font-size: var(--base-font);
}

/* 登录引导行 - 响应式文字 */
.register-row {
  text-align: center;
  margin-top: var(--spacing);
  font-size: var(--small-font);
  color: #666;
  white-space: nowrap;  /* 防止换行 */
}

.register-row text,
.register-row navigator {
  display: inline-block;
  vertical-align: middle;
}

.register-row .link {
  color: #2979FF;
  margin-left: 10rpx;
  text-decoration: underline;
}

/* 小屏幕设备适配 (<= 600rpx) */
@media screen and (max-width: 600rpx) {
  :root {
    --base-font: 24rpx;
    --small-font: 22rpx;
    --title-font: 32rpx;
    --subtitle-font: 22rpx;
    --spacing: 16rpx;
    --form-padding: 30rpx;
    --input-height: 56rpx;
    --btn-height: 76rpx;
    --code-btn-width: 120rpx;
    --form-max-width: 90%;  /* 占屏幕更大比例 */
  }
  
  /* 缩小标签宽度，避免小屏幕拥挤 */
  .u-form-item {
    --u-form-item-label-width: 120rpx !important;
  }
}

/* 大屏幕设备适配 (>= 900rpx) */
@media screen and (min-width: 900rpx) {
  :root {
    --base-font: 28rpx;
    --small-font: 26rpx;
    --title-font: 40rpx;
    --subtitle-font: 26rpx;
    --spacing: 24rpx;
    --form-padding: 50rpx;
    --input-height: 66rpx;
    --btn-height: 88rpx;
    --code-btn-width: 150rpx;
    --form-max-width: 700rpx;  /* 加宽表单 */
  }
}

/* 横屏模式适配 */
@media (orientation: landscape) {
  .login-container {
    padding: calc(var(--spacing) * 2);
  }
  
  .form-wrapper {
    max-width: 60%;  /* 横屏时表单占比减小，避免过宽 */
  }
}
</style>